<template>
  <div class="contact">
    <div class="c-center">
      <div class="cc-tips">联系我们/<span>让我们来谈谈</span></div>
      <form class="form">
        <div class="f-row">
          <input type="text" v-model="fullName" placeholder="请输入您的姓名" autocomplete="off" class="f-input">
          <input type="text" v-model="phone" maxlength="11" placeholder="请输入您的电话号码" autocomplete="off" class="f-input">
          <input type="text" v-model="weChat" placeholder="请输入您的微信" autocomplete="off" class="f-input">
        </div>
        <div class="f-row">
          <select class="f-select" v-model="demand">
            <option value="">您的需求或疑惑</option>
            <option value="网站建设">网站建设</option>
            <option value="小程序开发">小程序开发</option>
            <option value="竞价托管">竞价托管</option>
            <option value="网站优化">网站优化</option>
            <option value="信息流广告投放">信息流广告投放</option>
            <option value="抖音运营">抖音运营</option>
          </select>
          <input type="number" class="f-input" v-model="budget" min="0" placeholder="请输入您的预算">
          <button type="button" class="f-button" :disabled="formDisabled" @click="formSave">发送它</button>
        </div>
        <div class="f-row">
          <textarea v-model="content" placeholder="描述您的情况....." class="f-textarea"></textarea>
        </div>
      </form>
      <div style="height: 89px;"></div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['config'],
  data() {
    return {
      fullName: '',
      phone: '',
      weChat: '',
      demand: '',
      budget: '',
      content: '',
      formDisabled: false
    }
  },
  methods: {
    // 表单提交
    formSave() {
      if (this.phone == '') {
        this.$message({
          message: '请输入您的电话号码',
          type: 'warning'
        })
        return false
      }
      if (!/^1[3456789]\d{9}$/.test(this.phone)) {
        this.$message({
          message: '您的号码格式有误',
          type: 'warning'
        })
        return false
      }
      this.formDisabled = true
      this.$axios({
        url: this.$store.state.addMessageBoard,
        method: 'POST',
        headers: {
          'Content-Type':'application/x-www-form-urlencoded'
        },
        params: {
          fullName: this.fullName,
          phone: this.phone,
          weChat: this.weChat,
          demand: this.demand,
          budget: this.budget,
          content: this.content,
          ip: ctx.config.ip,
          pathUrl: this.config.domain + this.$route.fullPath
        }
      }).then(({ data }) => {
        if (data.code == 200) {
          this.$message({
            message: data.msg,
            type: 'success'
          })
          this.fullName = ''
          this.phone = ''
          this.weChat = ''
          this.demand = ''
          this.budget = ''
          this.content = ''
          this.formDisabled = false
          return false
        }
        this.$message({
          message: data.msg,
          type: 'error'
        })
        this.formDisabled = false
      }).catch(err => {
        this.$message({
          message: err,
          type: 'error'
        })
        this.formDisabled = false
      })
      return false
    }
  }
}
</script>